<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["commonData", "time1", "time2"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xDatas: null,
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.allData = newVal;

          this.getData();
        }
      },
      immediate: true,
    },
    time1: function () {
      this.getData();
    },
    time2: function () {
      this.getData();
    },
  },

  mounted() {
    setTimeout(() => {
      this.initChart();

      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 500);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      const CubeLeft = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - 9, shape.y - 7]; //左上角
          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 10]; //右上角
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      const CubeRight = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 2]; //右下
          const c4 = [shape.x + 18, shape.y - 1];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      const CubeTop = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + 18, shape.y - 1]; //右下
          const c3 = [shape.x + 9, shape.y - 8]; //右上
          const c4 = [shape.x - 9, shape.y - 7];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
      this.$echarts.graphic.registerShape("CubeTop", CubeTop);

      var option = {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "5%",
          top: "15%",
          containLabel: true,
        },
        legend: {
          //   data: ["压浆总数", "合格数"],
          data: ["压浆总数", "合格数", "合格率(%)", "不合格数", "不合格率(%)"],
          textStyle: {
            align: "right",
          },
          // top: '2%',
          // right: '2%',
          left: "center",
          top: "5%",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#9D9EA0",
            },
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: true,
            lineStyle: {
              color: "#DEDEDE",
              // 	opacity:0.1
            },
          },
          axisTick: false,
        },
        yAxis: {
          // min: 0,//最小
          // max: 1200,//最大
          // interval: 200,//相差
          name: "", //单位
          type: "value",

          axisLine: {
            show: true,
            lineStyle: {
              color: "#9D9EA0",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#9D9EA0",
            },
          },
          splitLine: {
            //分隔辅助线
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: true,
              lang: [
                this.time1.substr(0, 10) +
                  "至" +
                  this.time2.substr(0, 10) +
                  "压浆质量趋势",
                "关闭",
              ],

              optionToContent: function (opt) {
                let axisData = opt.xAxis[0].data; //坐标数据
                let series = opt.series; //折线图数据
                let tdHeads =
                  '<td  style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333"">施工部位</td>'; //表头
                let tdBodys = ""; //数据
                series.forEach(function (item) {
                  //组装表头
                  tdHeads += `<td style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333">${item.name}</td>`;
                });
                let table = `<table   border="1" style=" width: 96%;margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" class="dataViewTable"><tbody><tr>${tdHeads} </tr>`;

                for (let i = 0, l = axisData.length; i < l; i++) {
                  for (let j = 0; j < series.length; j++) {
                    //组装表数据
                    tdBodys += `<td>${series[j].data[i]}</td>`;
                  }
                  table += `<tr style="line-height: 30px;height: 30px;"><td style="padding: 2px 10px;text-align: center">${axisData[i]} </td>${tdBodys}</tr>`;
                  tdBodys = "";
                }
                table += "</tbody></table>";
                return table;
              },
            },
            magicType: {
              type: ["line", "bar"],
              option: {
                type: "line",
              },
            },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "压浆总数",
            type: "bar",
            barMaxWidth: 20,
            zlevel: 10,
            smooth: true, //平滑曲线显示
            // barGap: '100%',
            //  data: value,
            itemStyle: {
              normal: {
                color: {
                //   type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#4F93FE",
                    },
                    {
                      offset: 1,
                      color: "#A7D6FF",
                    },
                  ],
                },
                barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#3b6ebf",
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              },
            },
          },
          {
            name: "合格数",
            type: "bar",
            barMaxWidth: 20,
            zlevel: 10,
            smooth: true, //平滑曲线显示
            // barGap: '100%',
            //  data: value,
            itemStyle: {
              normal: {
                color: {
                //   type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00CC00",
                    },
                    {
                      offset: 1,
                      color: "#00CC00",
                    },
                  ],
                },
                barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#00CC00",
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              },
            },
          },
          {
            name: "合格率(%)",
            type: "line",
            zlevel: 11,
             barMaxWidth: 20,
            // yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                color: "#00CC00",
                borderColor: "#00CC00", //圆点透明 边框
                borderWidth: 7,
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#00CC00",
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              },
            },
            lineStyle: {
              color: "#00CC00",
            },
            // data: [null, 38.37, 21.55, 17.88, 32.23, 11.02]
          },

          {
            name: "不合格数",
            type: "bar",
            barMaxWidth: 20,
            zlevel: 10,
            smooth: true, //平滑曲线显示
            // barGap: '100%',
            //  data: value,
            itemStyle: {
              normal: {
                color: {
                //   type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ffa43a",
                    },
                    {
                      offset: 1,
                      color: "#ffa43a",
                    },
                  ],
                },
                barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#ffa43a",
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              },
            },
          },
          {
            name: "不合格率(%)",
            type: "line",
            zlevel: 11,
             barMaxWidth: 20,
            // yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                color: "#ffa43a",
                borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
                borderWidth: 7,
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#915c1e",
                    fontSize: 12,
                    fontWeight: 400,
                  },
                  // formatter: function (res) {
                  //     if (res.value) {
                  //         return res.value + '%'
                  //     } else {
                  //         return 0
                  //     }
                  // },
                },
              },
            },
            lineStyle: {
              color: "#ffa43a",
            },
            // data: [null, 38.37, 21.55, 17.88, 32.23, 11.02]
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getData() {
      var that = this;

      setTimeout(() => {
        that.updateChart();
        // that.updateChart();
      }, 800);
    },
    updateChart() {
      var data = this.allData;
      // const value = updateData;
      var dataOption = {
        title: {
          text:
            this.time1.substr(0, 10) +
            "至" +
            this.time2.substr(0, 10) +
            "压浆质量趋势",
        },
        xAxis: {
          data: data.months,
        },
        series: [
          {
            data: data.ActualCalculation, //压浆总数
          },
          {
            data: data.DiskNumber, // 合格数
          },
          {
            data: data.rate, // 合格率
          },
          {
            data: data.unQuantity, // 不合格数
          },
          {
            data: data.unrate, // 不合格率
          },
        ],
      };

      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;

      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
            // fontWeight: 500
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope>
h4 {
  font-size: 14px !important;
}
</style>
